<template>
  <div class="view_main">
    <head-top head-title="查看凭证" go-back="true" hidden='true'></head-top>
    <div class="image_box">
      <ul>
        <li v-show="img.length!==0">
          <des-imge :list="img"></des-imge>
        </li>
        <li v-show="img.length==0 && flag">
          <div class="none_img">
            <p>暂无凭证图片</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="scss">
  .view_main {
    width: 100%;
    padding-top: 40px;
    .image_box {
      ul {
        li {
          padding: 10px;
          .none_img {
            width: 100%;
            flex: 1;
            display: inline-flex;
            padding-top: 0px;
            justify-content: center;
            align-items: center;
            background: url("../../assets/default.png") no-repeat;
            background-size: 100px 100px;
            background-position: center;
            padding-bottom: 20px;
            p {
              font-size: 1.3rem;
              color: #0b7ad9;
              margin-top: 190px;
            }
          }
        }
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import commonUrl from '../../common/js/commonUrl.js'
  import desImge from '../common/desImge.vue'

  export default {
    name: 'ViewVoucher',
    data () {
      return {
        img: [],
        flag: false
      }
    },
    created () {
      this.getImage()
    },
    methods: {
      getImage () {
        const url = `${commonUrl.apihost}index.php/home/Govern/getImg?id=${this.$route.params.id}`
        this.$http.get(url).then(res => {
          // console.log(res)
          if (res.data.code === 200) {
            this.img = res.data.data
            this.flag = true
            // console.log(this.img)
          }
        })
      }
    },
    components: {
      headTop,
      desImge
    }
  }
</script>
